<template>
	<div class="main">
		<full-page ref="fullpage" :options="options" id="fullpage" v-if="!isMobile">
			<div class="section">
				<!-- 头像 -->
				<div class="user-img"></div>
				<!-- 昵称 -->
				<p class="userName">Limerence</p>
				<!-- 铭言 -->
				<p class="motto">人生而自由，却无往不在枷锁之中。</p>
				<!-- 箭头 -->
				<div class="arrow" @click="scrollNext"></div>
			</div>
			<div class="section">
				<div class="skill">
					<div class="content">
						<ul ref="ui">
							<li>前端</li>
							<li>HTML+CSS+JS、JQuery、Jsp、Thymeleaf</li>
							<li>Vue</li>
							<li>(BootStrap、Element-UI)...</li>
						</ul>
						<ul ref="sever">
							<li>后端</li>
							<li>JavaWeb、SSM</li>
							<li>SpringBoot</li>
							<li>SpringCloud</li>
							<li>Java、Python、C...</li>
						</ul>
						<ul ref="data">
							<li>数据库</li>
							<li>MySql</li>
							<li>Oracle</li>
							<li>Redis...</li>
						</ul>
						<ul ref="other">
							<li>其它</li>
							<li>Linux</li>
							<li>Hadoop...</li>
						</ul>
					</div>
					<div class="title">
						<p>技能 SKILL</p>
					</div>
				</div>
			</div>
			<div class="section">
				<!-- 用ul的after作时间轴 -->
				<ul class="timeLine" ref="timeLine">
					<!-- 从前 -->
					<li class="ago" ref="ago">
						<div>
							<h1>2019年9月-2023年6月</h1>
							<p>大学，本科</p>
							<p>软件工程专业，学士学位</p>
						</div>
					</li>
					<!-- 现在 -->
					<li class="now" ref="now">
						<div>
							<h1>2023年6月-2023年9月</h1>
							<p>照顾手术后母亲</p>
							<p>帮忙家庭事务</p>
						</div>
					</li>
					<!-- 以后 -->
					<li class="future" ref="future">
						<div>
							<h1>2023年9月-？</h1>
							<p>寻找工作</p>
						</div>
					</li>
				</ul>
			</div>
			<div class="section">
				<div class="contact">
					<p>联系方式</p>
					<div>
						<ul>
							<li>
								<a href="tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=2671098686"
									target="_blank">
									<div class="QQ"></div>
									<p class="contactName">QQ</p>
								</a>
							</li>
							<li>
								<a href="https://blog.csdn.net/qq_45528435?spm=1000.2115.3001.5343" target="_blank">
									<div class="CSDN"></div>
									<p class="contactName">CSDN</p>
								</a>
							</li>
						</ul>
						<ul>
							<li>
								<a href="https://gitee.com/milian01" target="_blank">
									<div class="gitee"></div>
									<p class="contactName">Gitee</p>
								</a>
							</li>
							<li>
								<a href="https://www.cnblogs.com/sober0/" target="_blank">
									<div class="blog"></div>
									<p class="contactName">博客园</p>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</full-page>
		<div class="mobile" v-if="isMobile">
			<p style="font-size: 30px;">!!!暂未设计手机端样式!!!</p>
			<p>1. 请用电脑打开此页面</p>
			<p>2. 或者使用手机浏览器工具箱中的“访问电脑版”</p>
			<div>
				<el-image v-for="url in tipImgs.tip1" :key="url" :src="url"></el-image>
			</div>
			<p>3. 或者在浏览器设置中，更改浏览设置->切换浏览器UA标识->电脑</p>
			<div>
				<el-image v-for="url in tipImgs.tip2" :key="url" :src="url"></el-image>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		Tooltip
	} from 'element-ui';
	export default {
		name: 'Home',
		data() {
			return {
				options: {
					licenseKey: 'ABC-123-fasafasdadadsadaf',
					navigation: true,
					scrollingSpeed: 500,
					// sectionsColor: ['#41b883', '#ff5f45', '#0798ec']
					afterLoad: this.afterLoad,
					onLeave: this.onLeave,
					anchors: ['user', 'skills', 'timeLine', 'contact'],
					lockAnchors: true,
				},
				tipImgs: {
					tip1: [
						require('@/assets/img/tips/tip1.jpg'),
						require('@/assets/img/tips/tip2.jpg'),
					],
					tip2: [
						require('@/assets/img/tips/tip3.jpg'),
						require('@/assets/img/tips/tip4.jpg'),
						require('@/assets/img/tips/tip5.jpg'),
					]
				},
				//是否手机端
				isMobile: false
			}
		},
		methods: {
			/* 下一页 */
			scrollNext() {
				this.$refs.fullpage.api.moveTo(2);

			},
			/* 触发动画 */
			//vue-pullpage 加载后回调函数
			/*
				- `origin`:  *(Object)* 前置 section
				- `destination`: *(Object)* 目标 section。
				- `direction`: *(String)* 它将根据滚动方向 `up` 或 `down` 取值。
			*/
			afterLoad(origin, destination, direction, trigger) {
				if (destination.anchor == 'skills') {
					this.$refs.ui.classList.add('showSkills-0s');
					this.$refs.sever.classList.add('showSkills-1s');
					this.$refs.data.classList.add('showSkills-2s');
					this.$refs.other.classList.add('showSkills-3s');
				} else if (destination.anchor == 'timeLine') {
					this.$refs.ago.firstChild.classList.add('activeEventEnterTop');
					this.$refs.future.firstChild.classList.add('activeEventEnterTop');
					this.$refs.now.firstChild.classList.add('activeEventEnterBottom');
				}
			},
			//vue-pullpage 翻页后回调函数
			onLeave(origin, destination, direction, trigger) {
				if (origin.anchor == 'skills') {
					setTimeout(() => {
						this.$refs.ui.classList.remove('showSkills-0s');
						this.$refs.sever.classList.remove('showSkills-1s');
						this.$refs.data.classList.remove('showSkills-2s');
						this.$refs.other.classList.remove('showSkills-3s');
					}, 500);
				} else if (origin.anchor == 'timeLine') {
					setTimeout(() => {
						this.$refs.ago.firstChild.classList.remove('activeEventEnterTop');
						this.$refs.future.firstChild.classList.remove('activeEventEnterTop');
						this.$refs.now.firstChild.classList.remove('activeEventEnterBottom');
					}, 500);
				}
			}
		},
		created() {
			const userAgent = navigator.userAgent;
			this.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
		}
	}
</script>

<style lang="scss" scoped>
	/* 设置每个区域背景 */
	#fullpage {

		>div {

			&:nth-child(1) {
				background: url("@/assets/img/bg9.png") no-repeat;
				background-size: cover;
			}

			&:nth-child(2) {
				background: url("@/assets/img/bg17.png") no-repeat;
				background-size: cover;
			}

			&:nth-child(3) {
				background: url("@/assets/img/bg10.png") no-repeat;
				background-size: cover;
			}

			&:nth-child(4) {
				background: url("@/assets/img/bg12.png") no-repeat;
				background-size: cover;
			}
		}
	}

	/* ------头像首页------- */

	/* 头像呼吸灯动画效果 */
	@keyframes user-img {
		0% {
			box-shadow: 0px 0px 0px 0px black;
		}

		50% {
			box-shadow: 0px 0px 100px 10px white;
		}

		100% {
			box-shadow: 0px 0px 0px 0px black;
		}
	}

	/* 头像 */
	.user-img {
		width: 200px;
		height: 200px;
		border-radius: 50%;
		margin: 0 auto;
		animation: user-img 5s ease-in-out infinite;
		background: url("@/assets/img/user.jpg") no-repeat;
		background-size: cover;
		transition: opacity 0.5s;

		&:hover {
			opacity: 0.5;
		}
	}

	/* 昵称 */
	.userName {
		width: 200px;
		height: 50px;
		margin: 20px auto;
		font-weight: 900;
		color: white;
		text-align: center;
		font-size: 30px;
	}

	/* 铭言 */
	.motto {
		width: 400px;
		height: 100px;
		margin: 20px auto;
		font-weight: 10;
		font-size: 20px;
		text-align: center;
		color: white;
		font-style: italic;
	}

	/* 箭头 */
	$arrowWidth: 50px;

	.arrow {
		width: $arrowWidth;
		height: 50px;
		position: absolute;
		bottom: 5vh;
		left: calc(50% - $arrowWidth/2);
		background: url("@/assets/img/down.gif") no-repeat;
		background-size: cover;
	}

	/* ------技能区------- */
	.skill {
		margin: 0 auto;
		width: 1000px;
		height: 800px;
		background-color: rgba(255, 255, 255, 0.5);
		border-radius: 10px;

		>div {
			display: inline-block;
		}

		//内容
		.content {
			width: 80%;
			height: 100%;
			float: left;

			ul {
				margin-left: 10%;
				width: 80%;
				list-style: none;
				border-bottom: 2px solid black;
				opacity: 0;

				li {
					height: 40px;
					font-size: 25px;
					font-style: italic;

				}

				&:nth-last-child(1) {
					border: none;
				}

			}

		}

		// 展示技能动画
		@keyframes showSkills {
			0% {
				transform: translateX(-10%);
				opacity: 0;
			}

			100% {
				transform: translateX(0%);
				opacity: 1;
			}
		}

		.showSkills-0s {
			animation: showSkills 1s;
			animation-delay: 0s;
			animation-fill-mode: forwards;
		}

		.showSkills-1s {
			animation: showSkills 1s;
			animation-delay: 1s;
			animation-fill-mode: forwards;
		}

		.showSkills-2s {
			animation: showSkills 1s;
			animation-delay: 2s;
			animation-fill-mode: forwards;
		}

		.showSkills-3s {
			animation: showSkills 1s;
			animation-delay: 3s;
			animation-fill-mode: forwards;
		}

		//标题
		.title {
			width: 20%;
			height: 100%;
			//background-color: #0400ff;

			p {
				display: inline-block;
				width: 100%;
				height: 30%;
				margin: 50px;
				writing-mode: vertical-lr;
				border-left: 2px solid black;
				font-weight: 100;
				font-size: 50px;
				text-align: center;
				float: left;
			}

		}
	}

	/* -----时间区------- */

	/* 时间轴 */
	//总高度
	$timeLineHeight: 600px;
	//事件气泡高度
	$eventDivHeight: 40%;
	//气泡箭头高度
	$eventArrowHeight: 20px;

	.timeLine {
		width: 1500px;
		height: $timeLineHeight;
		//background-color: aqua;
		margin: 0 auto;
		padding: 0;
		position: relative;
		display: flex;
		justify-content: space-between;

		// 时间线
		&::after {
			content: '';
			display: block;
			width: 100%;
			height: 3px;
			position: absolute;
			top: 50%;
			background: linear-gradient(45deg,
					#ff0000 0%,
					#ffb600 11%,
					#fff600 22%,
					#a5ff00 33%,
					#00a9ff 44%,
					#0400ff 55%,
					#8a00fc 66%,
					#ff00e9 77%,
					#ff0059 88%,
					#ff0000 100%);
		}

		/* 事件气泡父类列表 */
		.ago,
		.now,
		.future {
			display: inline-block;
			width: 100%;
			height: 100%;
			position: relative;
			//background-color: #a5ff00;

			// 事件气泡
			>div {
				width: 80%;
				height: $eventDivHeight;
				background-color: white;
				position: relative;
				opacity: 0;
				border-radius: 10px;
				padding: 15px;

				// 气泡箭头
				&::after {
					content: '';
					display: block;
					width: 0px;
					height: 0px;
					border: $eventArrowHeight solid rgba(0, 0, 0, 0);
					position: absolute;
					left: calc(50% - $eventArrowHeight);
				}

				h1 {
					text-align: center;
					font-weight: 100;
					font-family: "微软雅黑";
				}

				>p {
					font-size: 25px;
					font-family: "微软雅黑";
					text-align: center;
				}
			}

		}

		/* 为三个气泡小箭头单独定义位置与样式 */

		.ago {
			>div {

				&::after {
					border-top: $eventArrowHeight solid white;
					bottom: calc(-2 * $eventArrowHeight);
				}
			}
		}

		.now {
			>div {

				bottom: calc($eventDivHeight - 100%);

				&::after {
					border-bottom: $eventArrowHeight solid white;
					top: calc(-2 * $eventArrowHeight);
				}
			}
		}

		.future {
			>div {

				&::after {
					border-top: $eventArrowHeight solid white;
					bottom: calc(-2 * $eventArrowHeight);
				}
			}
		}

	}

	/* 事件气泡的载入动画 */
	//上方的气泡
	@keyframes eventEnterTop {
		0% {
			transform: translateY(-25%);
			opacity: 0;
		}

		100% {
			transform: translateY(0%);
			opacity: 1;
		}
	}

	//下方的气泡
	@keyframes eventEnterBottom {
		0% {
			transform: translateY(25%);
			opacity: 0;
		}

		100% {
			transform: translateY(0%);
			opacity: 1;
		}
	}

	//上方气泡下移动画修饰样式
	.activeEventEnterTop {
		animation: eventEnterTop 2s;
		animation-fill-mode: forwards;
	}

	//下方气泡上移修饰样式
	.activeEventEnterBottom {
		animation: eventEnterBottom 2s;
		animation-fill-mode: forwards;
	}

	/* ------- 联系区 ------- */
	.contact {
		>p {
			font-weight: 300;
			font-size: 50px;
			color: white;
			text-align: center;
		}

		>div {
			width: 800px;
			height: 500px;
			background-color: rgba(255, 255, 255, 0.5);
			margin: auto;
			border-radius: 10px;
		}

		ul {
			padding: 20px;
			list-style: none;
			display: flex;
			justify-content: space-around;
			margin: 0;

			li {
				display: inline-block;
				height: 50%;


				>a {

					text-decoration: none;

					div {
						width: 150px;
						height: 150px;
						display: inline-block;
					}
				}

				.QQ {
					background: url("@/assets/img/icons/QQ.png") no-repeat;
					background-size: cover;
				}

				.CSDN {
					background: url("@/assets/img/icons/csdn.png") no-repeat;
					background-size: cover;
				}

				.gitee {
					background: url("@/assets/img/icons/gitee.png") no-repeat;
					background-size: cover;
				}

				.blog {
					background: url("@/assets/img/icons/blog.png") no-repeat;
					background-size: cover;
				}

				.contactName {
					text-align: center;
					color: black;
					font-size: 20px;
					font-family: "微软雅黑";
				}
			}
		}
	}
</style>